<div class="pluginDetail">

  <div class="pluginDetailInfoContainer">

    <div class="pluginDetailTop clearfix">
      <div class="pluginDetailLeft">

        <div class="pluginImage">
          <img data-ng-src="{{plugin.image}}" data-ng-show="plugin.image"/>      
        </div>

        <div class="btn-group versionSelectDropdown" data-uib-dropdown data-is-open="status.isopen">
          <button type="button" class="btn btn-primary dropdown-toggle" data-uib-dropdown-toggle>
            <span class="multiselectButtonText">
              {{ 'marketplace.versionSelect.prefix' | translate }}: {{ selectedPluginVersion.version + ' (' + selectedPluginVersion.branch + ')'}}
            </span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" data-uib-dropdown-menu role="menu">

            <li data-ng-repeat="version in plugin.versions"
                data-ng-click="selectVersion( version )">
              <a>
                {{ version.version + ' (' + version.branch + ')'}}
              </a>
            </li>

          </ul>
        </div>
        
      </div>
      <div class="pluginDetailRight">

        <div class="pluginHeaderInfo">
          <div class="pluginName">{{plugin.name}}</div>
          <div class="pluginAuthor">{{plugin.author.name}}</div>
        </div>     

        <div class="pluginDetailHeaderButtons">
          <button data-install-update-button data-plugin="plugin" data-selected-version="selectedPluginVersion"
              data-allow-reinstall="true">
          </button>
          <button class="pentaho-button uninstallButton" data-ng-click="uninstallPlugin(plugin)" data-ng-disabled="!plugin.isInstalled">
            <span class="text">{{ 'marketplace.installationButton.uninstall' | translate }}</span>
            <span class="icon"></span>
          </button>
        </div>
        
      </div>
    </div>

    <div class="pluginDetailMiddle clearfix">
      <div class="pluginDetailLeft">

        <div class="sectionHeader">{{ 'marketplace.pluginDetail.section.information.title' | translate }}</div>

        <div data-ng-repeat="info in pluginInformation" class="pluginInformationItem clearfix">
          <div class="pluginInformationLeft">
            <span>{{info.label}}:</span>            
          </div>
          <div class="pluginInformationRight">
            <a data-ng-if="info.hasUrl()" data-ng-href="{{info.url}}" target="_blank">{{info.description}}</a>
            <span data-ng-if="!info.hasUrl()">{{info.description}}</span>            
          </div>
        </div>  

      </div>
      <div class="pluginDetailRight">

        <div data-ng-if="plugin.description">
          <div class="sectionHeader">{{ 'marketplace.pluginDetail.section.description.title' | translate }}</div>
          <div data-ng-bind-html="plugin.description" class="pluginDescriptionContent"></div>
        </div>

        <div data-ng-if="plugin.screenshotUrls && plugin.screenshotUrls.length > 0" class="pluginScreenshots">
          <div class="sectionHeader">{{ 'marketplace.pluginDetail.section.screenshots.title' | translate }}</div>
          <div data-uib-carousel data-interval="5000" data-active="0">
            <div data-uib-slide data-ng-repeat="screenshotUrl in plugin.screenshotUrls" data-index="$index">
              <img data-ng-src="{{screenshotUrl}}">
            </div>
          </div>
        </div>
        
      </div>
    </div>

  </div>

  <div data-ng-if="selectedPluginVersion.devStage" class="pluginDetailBottom clearfix">
    <div data-dev-stage-icon
         data-lane="selectedPluginVersion.devStage.lane.id"
         data-phase="selectedPluginVersion.devStage.phase"
         data-disable-popup="true"></div>
    <div class="devStageName">{{selectedPluginVersion.devStage.name}}</div>
    <div class="devStageDescription">{{selectedPluginVersion.devStage.description}}</div>
  </div>
  <a class="pull-right"
      href="mailto:marketplace-feedback@pentaho.com?subject={{ 'marketplace.devStage.disagreeMail.subject' | translate:disagreeMailTranslationVars | encodeURI }}">
    {{ 'marketplace.devStage.disagreeMail.linkText' | translate }}
  </a>

</div>
